import 'package:flutter/material.dart';

import 'package:get/get.dart';

import '../controllers/home_controller.dart';
// import '../widgets/bottom_app_bar_widget.dart';
// import '../widgets/float_action_btn_widget.dart';
import '../widgets/fluid_bar/index.dart';
// import '../widgets/bubble_bar/index.dart';

/* NOTICE:
 *  🌂 bottomNavigationBar 四个入口
 *  ❌👏 版本1：最开始的方案切换body处的Widget，但是以`List<Widget>`的形式切换性能不佳
 *  ❌💨 版本2：每个入口都有相同的BottomNavbar；每次都是路由切换，navbar的体验不佳（如动画无法展示）
 *  ✔✨ 最终版：[IndexedStack](http://laomengit.com/flutter/widgets/Stack.html#indexedstack)的出现解决了版本1的缺点，也没有版本2的痛点
 */
import '../widgets/routes/base_view.dart';
import '../widgets/routes/option_view.dart';
import '../widgets/routes/discover_view.dart';
import '../widgets/routes/mine_view.dart';

class HomeView extends GetView<HomeController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: GetBuilder<HomeController>(builder: (_) {
          return Text(_.appBarTitle);
        }),
        centerTitle: true,
      ),
      body: GetBuilder<HomeController>(builder: (_) {
        // NOTICE: IndexedStack是Stack的子类，Stack是将所有的子组件叠加显示，而IndexedStack只显示指定index的子组件
        return IndexedStack(
          index: _.current,
          children: [
            BaseView(),
            OptionView(),
            DiscoverView(),
            MineView(),
          ],
        );
      }),
      /* part1 */
      // floatingActionButton: FloatActionBtnWidget(),
      // floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      // bottomNavigationBar: BottomAppBarWidget(current: 0),
      /* part2 */
      bottomNavigationBar: GetBuilder<HomeController>(
        builder: (_) => FluidNavBar(
          onChange: (int index) {
            _.setCurrent(index);
          },
        ),
      ),
      /* part3 */
      // bottomNavigationBar: NavBar(
      //   items: [
      //     NavBarItemData("Home", Icons.home, 110, Color(0xff01b87d)),
      //     NavBarItemData("Gallery", Icons.image, 110, Color(0xff594ccf)),
      //     NavBarItemData("Camera", Icons.camera, 115, Color(0xff09a8d9)),
      //     NavBarItemData("Likes", Icons.favorite, 100, Color(0xffcf4c7a)),
      //   ],
      //   itemTapped: (int index) {
      //     print(index);
      //   },
      //   // currentIndex: 0,
      // ),
    );
  }
}

/* 如何实现navbar切换时IndexedStack的切换动画
AnimatedSwitcher(
  switchInCurve: Curves.easeOut,
  switchOutCurve: Curves.easeIn,
  duration: Duration(milliseconds: 1000),
  child: ,
) 
*/
